<template>
  <div style="height: 100vh; width: 100%">
    <!-- {{ treeData }} -->
    <el-tree class="tree" :data="treeData" :props="treeProps" node-key="id" show-checkbox @check-change="handleCheckChange" :default-expanded-keys="defaultExpandedKeys">
      <template #default="{ node, data }">
        <!-- <div class="tree-node"> -->
        <span class="custom-tree-node">
          <!-- {{ data.tableData }} -->
          <div class="table-container">
            <el-table class="table" :data="data.tableData" :row-key="row => row.id" border>
              <el-table-column v-for="column in columns" :key="column.key" :prop="column.key" :label="column.label" :min-width="column.minWidth">
                <!-- <template #default="{ row }">
              <el-input v-model="row[column.key]" autocomplete="off"></el-input>
            </template> -->
              </el-table-column>
            </el-table>
          </div>
        </span>
        <!-- </div> -->
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import http from '/admin/support/http'
import storage from '/admin/utils/storage'

// let treeData = reactive([
//   // {
//   //   id: 1,
//   //   // name: 'Node 1',
//   //   tableData: reactive([{ id: 1, fbillno: 'QWC-2301-706486康诚BS19', fsupplierid_number: 'VEN00397', fsupplierid_name: '广州康诚印务有限公司' }]),
//   //   detailscheck_all: [
//   //     {
//   //       id: 11,
//   //       // name: 'Node 1-1',
//   //       tableData: reactive([{ id: 6, fmaterialmodel: '', fmaterialid: 'DPPJSJB0001', fmaterialname: '玻璃杯', funitid_name: '个', fmodel: '', fqty: '5000' }]),
//   //     },
//   //   ],
//   // },
//   // {
//   //   id: 1,
//   //   // name: 'Node 1',
//   //   tableData: reactive([{ id: 1, fbillno: '', fsupplierid_number: '', fsupplierid_name: '' }]),
//   //   detailscheck_all: [
//   //     {
//   //       id: 11,
//   //       // name: 'Node 1-1',
//   //       tableData: reactive([{ id: 6, fmaterialmodel: '', fmaterialid: '', fmaterialname: '', funitid_name: '个', fmodel: '', fqty: '' }]),
//   //     },
//   //   ],
//   // },
//   // 数组A和数组B 数组A对象需要有id属性，name属性，tableData属性，children属性为二级和一级属性一致，数组B的id属性赋值给数组A对应id属性，
// ])


let treeData = reactive(storage.getItem('treeData'))

const treeProps = reactive({
  children: 'detailscheck_all',
  label: 'name',
})

const defaultExpandedKeys = ref([1, 2])

const columns = reactive([
  { key: 'id', label: 'ID', minWidth: 50 },
  { key: 'fbillno', label: '采购订单', minWidth: 250 },
  { key: 'fsupplierid_number', label: '供应商编码', minWidth: 150 },
  { key: 'fsupplierid_name', label: '供应商名称', minWidth: 200 },
  { key: 'supplierOrder', label: '送货单', minWidth: 100 },
  { key: 'fmaterialmodel', label: '规格', minWidth: 100 },
  { key: 'fmaterialid', label: '品号', minWidth: 100 },
  { key: 'fmaterialname', label: '品名', minWidth: 100 },
  { key: 'funitid_name', label: '单位', minWidth: 100 },
  { key: 'fmodel', label: '型号', minWidth: 100 },
  { key: 'fqty', label: '数量', minWidth: 100 },
])


const handleCheckChange = (checkedNodes, node) => {
  // 省略不变的逻辑
  console.log('选中节点', checkedNodes)
  console.log('当前节点是否全选', node)
}

let purchaseData = ref([])
let newTree = ref([])

// const getCategoryApi = () => {
//   http.get(`/purchasing/purchaseorder`).then(r => {
//     purchaseData.value = r.data.data
//     console.log('采购：', purchaseData.value)

//     let resData = r.data.data

//     let newArray = resData.map(function (obj) {
//       return {
//         id: obj.id,
//         fbillno: obj.fbillno,
//         fsupplierid_number: obj.fsupplierid_number,
//         fsupplierid_name: obj.fsupplierid_name,
//         detailscheck_all: obj.detailscheck_all.map(function (detail) {
//           return {
//             id: detail.id,
//             // purchaseorder_id:detail.purchaseorder_id,
//             fmaterialid: detail.fmaterialid,
//             fmaterialname: detail.fmaterialname,
//             funitid_name: detail.funitid_name,
//             fqty: detail.fqty,
//           }
//         }),
//       }
//     })
//     console.log('新数组', newArray)
    
//     treeData = newArray.map(function (node) {
//       return {
//         id: node.id,
//         tableData: reactive([node]),
//         detailscheck_all: node.detailscheck_all.map(function (detail) {
//           return {
//             id: detail.id,
//             tableData: reactive([detail]),
//           }
//         }),
//       }
//     })
//     console.log('节点数组：', treeData)
//     treeData = newTree.value
//   })
// }

// getCategoryApi()
</script>

<style scoped>
.tree {
  width: 100%;
}

.tree-node {
  width: 100%;
  /* width: 600px; */
  border: 1px solid pink;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.table-container {
  width: 100%;
  flex: 1;
  overflow-x: auto;
  margin-top: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
}

.table {
  width: 100%;
}
.custom-tree-node {
  width: 100%;
}

/* .custom-tree-node {
  display: inline-block;
  margin-right: 15px;
} */
/deep/ .el-tree-node__content {
  height: 150px !important;
  /* width: 1000px; */
}

::-webkit-scrollbar {
  /* width: 2px; */
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}
</style>